<template>
  <div class="detail-page">
    <van-search
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />
    <van-dropdown-menu>
      <van-dropdown-item
        @change="onSubmit"
        v-model="value1"
        :options="option1"
      />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <van-list>
      <ArticleItem
        v-for="(item, index) in list"
        :key="index"
        :item="item"
      ></ArticleItem>
    </van-list>
  </div>
</template>

<script>
import { getsearchhouse } from '@/api/atticle'
import ArticleItem from '@/components/ArticleItem.vue'
// import ArticleItem from '@/components/ArticleItem.vue'
export default {
  name: 'detail-page',
  components: {
    ArticleItem
  },
  data () {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '方式', value: 0 },
        { text: '不限', value: 1 },
        { text: '整租', value: 2 },
        { text: '合租', value: 3 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ],
      list: []
    }
  },
  methods: {
    onSubmit () {
      if (this.option1[this.value1].text === '不限') {
        return this.list
      } else {
        this.list = this.list.filter((item) => {
          item.title = item.title ? item.title : this.option1[this.value1].text

          return item.title.slice(0, 2) === this.option1[this.value1].text
        })
      }
    }
  },
  computed: {
    getlist () {
      const { body } = getsearchhouse()
      return body.list
    }
  },
  async created () {
    const { body } = await getsearchhouse()
    this.list = body.list
    // this.list.push(...body)
  }
  // async onLoad () {
  //   const { body } = await getsearchhouse()
  //   console.log(body)
  //   this.list = body.list
  // }
}
</script>

<style lang="less" scoped>
.a1 {
  position: fixed;
  top: 0;
}
</style>
